<template>
	<view class="hui b_width">
		<u-navbar :autoBack="true" leftIcon=" " title="强邦乐智能陪护" titleStyle="color:#fff" :placeholder="true"
			bgColor="#3C7CFF">
		</u-navbar>

		<view class="blue_box">
			<!-- <view class="title">强邦乐智能陪护</view> -->
			<view class="y_box b_flex_cc" @click="getWxInfo()">
				<view class="y1 b_flex_cc">
					<view class="y2_box b_flex_cc">
						<view class="y2 b_flex_cc">
							<view class="y3_box b_flex_cc">
								<view class="y3 b_flex_cc">
									<view class="y4 b_flex_cc">
										<button v-if="!token" class="y4 b_flex_cc" open-type="getPhoneNumber"
											@getphonenumber="getPhoneNumber">
											<image class="sm_img" mode="widthFix" src="@/static/img/sm.png"></image>
										</button>
										<image v-else class="sm_img" mode="widthFix" src="@/static/img/sm.png"></image>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="m_box b_flex_c_cc" @click="show=true">
				<image style="width: 80rpx" class="mobile" mode="widthFix" src="@/static/img/bh.png"></image>
				<view>手输编码</view>
			</view>
			
			<view class="ks_box b_flex_cc">
				
					<view class="sm_text">扫码开锁</view>
					
				
			</view>

			<view class="m_box m_back b_flex_c_cc" @click="$project.toPhone()">
				<image class="mobile" mode="widthFix" src="@/static/img/mobile.png"></image>
				<view>联系客服</view>
			</view>
             <view class="sm_texts">(开锁请点击上面扫码,关锁请点击下方关锁还床)</view>
			<view class="icon_box b_flex_c_s_w">
				<view v-for="(item,index) in icon" :key="index" class="icon_kuai" @click="toClick(item)">
					<image v-if="item.type==3&&order" mode="widthFix" class="icon_img" :src="item.imgs"></image>
					<image v-else mode="widthFix" class="icon_img" :src="item.img"></image>
					<view class="icon_text">{{item.text}}</view>
				</view>
			</view>
		</view>


		<u-popup :closeOnClickOverlay="false" :show="show" mode="bottom" :round="35" @close="show=false">
			<view class="b_flex_cc msg_box">
				<image class="ks_icon" mode="widthFix" src="@/static/img/ks.png"></image>
				<view>手动输入编号</view>
			</view>
			<view class="input_box">
				<input v-model="suoParams.deviceNumber" placeholder-style="color:#9296AF" placeholder="请输入锁编号" />
			</view>
			<view class="ks_button" @click="kai()">立即开锁</view>
			<view class="qx_button" @click="show=false">取消</view>
		</u-popup>

		<view class="tc"></view>
		<Bootm value="首页"></Bootm>

	</view>
</template>

<script>
	import kevyLoading from '@/components/kevy-loading/kevy-loading';
	import Bootm from "@/components/bottom.vue";
	import CryptoJS from "crypto-js";
	import crypto from "crypto";
	import store from "@/store/index.js";
	import {
		userLogin,
		userPhone,
		deviceLease,
		deviceOrder,
		errorAdd,
		deviceRptstat,
		modeList,
		getTx
	} from "@/require/api.js";
	export default {
		components: {
			kevyLoading,
			Bootm
		},
		data() {
			return {
				icon: [
				/* 	{
						text: '手输编码',
						img: require('@/static/img/bh.png'),
						type: 1
					}, */
					/* {
						text: '代缴代开',
						img: require('@/static/img/dj.png'),
						type: 2
					}, */
					{
						text: '关锁还床',
						img: require('@/static/img/gs.png'),
						msg:'归还请点这个',
						imgs: require('@/static/img/gss.png'),
						type: 3
					},
					/* {
						text: '新手指南',
						img: require('@/static/img/kf.png'),
						type: 4
					}, 
					{
						text: '被子租赁',
						img: require('@/static/img/zps.png'),
						type: 5
					},
					{
						text: '商城购物',
						img: require('@/static/img/shops.png'),
						type: 6
					}, */
					{
						text: '我的押金',
						img: require('@/static/img/yj.png'),
						type: 7
					}
				],
				devices: [],
				deviceId: '',
				serviceId: '0000FEE7-0000-1000-8000-00805F9B34FB',
				characteristicId: '000036F5-0000-1000-8000-00805F9B34FB',
				characteristicIds: '000036f6-0000-1000-8000-00805f9b34fb',
				sKey: '3A60432A5C01211F291E0F4E0C132825',
				params: {
					nickName: '微信用户',
					avatar: "https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132",
					code: '',
					city: '',
					country: '',
					headimgurl: "https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132",
					openId: '',
					province: '',
					sex: '',
					spread_spid: 0,
					type: 'routine'
				},
				phoneParams: {
					encryptedData: '',
					iv: '',
					code: '',
					key: '',
					type: 'routine'
				},
				show: false,
				token: '',
				suoParams: {
					deviceNumber: ''
				}
			}
		},
		onLoad(data) {
			
			if (!data) return true;
			this.token = uni.getStorageSync('qlbToken');
			if (!this.token) return;
			let scene = decodeURIComponent(data.q);
			if (scene=='undefined') return;
			let code = scene.split('?deviceNumber=');
			this.suoParams.deviceNumber = code[code.length - 1];
			this.kai();
		},
		onShow() {
			
			
			this.$project.getNetwork();
			
			this.getOnOrder();
			this.$blue.openBluetoothAdapter();
			this.token = uni.getStorageSync('qlbToken');
		},
		onShareAppMessage() {

		},
		onShareTimeline() {

		},
		computed: {
			order() {
				return this.$store.state.order
			}
		},
		methods: {
			
			async getOnOrder() {

				deviceOrder({
					page: 1,
					limit: 10,
					status: 0,
					materials: 'accompanyingBed'
				}).then(res => {

					let data = res.data;
					if (data.list && data.list.length == 1) {
						this.$store.commit('setOrder', data.list[0]);
						//this.icon[1].img = require('@/static/img/gss.png');
					} else {
						this.$store.commit('setOrder', '');
					}
				});
			},
			async kai() {
				
				if (!this.suoParams.deviceNumber) return this.$project.toast('请输入编号');
				this.isPay(this.suoParams);
			},
			async isPay(params) {
				let {
					code,
					data
				} = await deviceLease(params);
				if (!data) return;
				this.$project.toPath('/pages/lock/pay?deviceNumber=' + params.deviceNumber);
				return;
			},
			getWxInfo() {
				if (this.token) {
					console.log(this.token);
					this.sao();
					return;
				}
				let _ = this;
				uni.getUserProfile({
					desc: '授权确认',
					success(res) {
						console.log('用户信息', res);
						let {
							nickName,
							avatarUrl,
							gender
						} = res.userInfo;
						_.params.nickName = nickName;
						_.params.avatar = avatarUrl;
						_.params.headimgurl = avatarUrl;
						_.params.sex = gender;

						uni.login({
							provider: 'weixin',
							success(ress) {
								_.params.code = ress.code;
								userLogin(_.params, ress.code).then(data => {
									_.phoneParams.key = data.data.key;
									if (!data.data.key) {
										uni.setStorageSync('qlbToken', data.data.token);
										_.token = data.data.token;
										_.sao();
									}
								});
							}
						})

					}
				})
			},
			getPhoneNumber(e) {

				setTimeout(() => {
					this.wxLogin(e);
				}, 1500)

			},
			wxLogin(e) {

				let _ = this;
				if (!_.phoneParams.key) return;
				uni.login({
					provider: 'weixin',
					success(ress) {
						console.log(ress);
						_.phoneParams.code = ress.code;

						let {
							encryptedData,
							iv
						} = e.detail;

						_.phoneParams.encryptedData = encryptedData;
						_.phoneParams.iv = iv;

						userPhone(_.phoneParams).then(data => {
							uni.setStorageSync('qlbToken', data.data.token);
							_.token = data.data.token;
						})
					}
				})
			},
			toClick(item) {

				switch (item.type) {
					case 1:
                       /* this.$store.commit('setType', 1);
                        this.$blue.createBLEConnection('CB:B1:3D:FF:6A:1E'); */
						
						this.show = true;
						break;
					case 2:
						this.$project.toPath('/pages/lock/replace');
						break;
					case 3:
					
						if (this.$store.state.order) {
							this.submit();
							return;
						} else {
							this.$project.toPath('/pages/bed/index?status=' + 0)
						}
					 	   
						break;
					case 4:
						this.$project.toPath('/pages/lock/guide');
						break;
					case 5:
						this.$project.toTable('/pages/index/zp');
						break;
					case 6:
						this.$project.toTable('/pages/index/shop');
						break;
					case 7:
						this.$project.toPath('/pages/user/deposit');
						break;
				}
				//this.getWxInfo();
				//this.createBLEConnection();

			},
			sao() {
				/* if (this.$store.state.order) {
					this.$project.toast('有设备，正在使用中');
					return;
				} */
				let _ = this;

				uni.scanCode({
					onlyFromCamera: true,
					success: function(res) {

						let data = res.result.split('?deviceNumber=');

						let params = {
							deviceNumber: data[data.length - 1]
						};
						_.isPay(params);

					}
				})
			},
			submit() {
				let _ = this;
                 uni.authorize({
                 	scope:"scope.userLocation",
                 	success:function(res){
                 		_.$blue.openBluetoothAdapter();
                 		console.log(res);
                 		_.close();
                 	},
                 	fail:function(error){
                 		console.log(error);
                 		errorAdd({msg: JSON.stringify(error)});
                 		_.$project.isLocation();
                 	}
                 })
			},
			close(){
				let _ = this;
				let blue = this.$blue;
				uni.showModal({
					title: '确认是否关锁还床?',
					success(res) {
						if (res.confirm) {
				
							let mac = _.order.mac;
				
				
							let deviceId = '';
							console.log(_.$store.state.macList);
							if (!_.$store.state.macList[mac]) {
				              let content=this.$project.getMacMsg(mac,_.$store.state.macList);
				                 uni.showModal({
				                 	title: '设备没找到，请重试',
				                 	content: content,
				                 	showCancel: false,
				                 	success() {
				                 	}
				                 });
								return true;
							} else {
								deviceId = _.$store.state.macList[mac];
							}
				
							/* if (!_.$project.inObjectArray({
									deviceId: mac
								}, _.$store.state.devices, 'deviceId')) {
								return _.$project.toast('设备未找到,请稍后重试');
							} */
				
							_.$store.commit('setType', 2);
							uni.showLoading({
								title: '关锁中,请勿远离设备...'
							})
							blue.createBLEConnection(deviceId);
						}
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.blue_box {
		background-color: #3C7CFF;
		width: 100%;
		height: 810rpx;
		box-sizing: border-box;
		//padding: 100rpx 0 0 0;
	}

	.title {
		font-size: 45rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		box-sizing: border-box;
		padding: 0rpx 30rpx 0 30rpx;
	}

	.y_box {
		width: 450rpx;
		height: 450rpx;
		margin: 0 auto 0rpx auto;
	}

	.y2_box {
		width: 100%;
		height: 350rpx;


	}

	.y3_box {
		width: 100%;
		height: 250rpx;

	}

	.y1 {
		width: 450rpx;
		height: 450rpx;
		background: #5990FF;
		border-radius: 50%;
		animation-name: yu1;
		animation-duration: 1s;
		animation-iteration-count: infinite;
	}

	.y2 {
		width: 350rpx;
		height: 350rpx;
		background: #719FFC;
		border-radius: 50%;
		animation-name: yu2;
		animation-duration: 1s;
		animation-iteration-count: infinite;

	}

	.y3 {
		width: 250rpx;
		height: 250rpx;
		background: #86AEFD;
		border-radius: 50%;
		animation-name: yu3;
		animation-duration: 1s;
		animation-iteration-count: infinite;
	}

	.y4 {
		width: 176rpx;
		height: 176rpx;
		background: #D8E8FE;
		border-radius: 50%;
	}

	.sm_img {
		width: 76rpx;
	}

	.sm_text {
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}
	
	.sm_texts{
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		text-align: center;
		
	}

	.icon_box {
		position: relative;
		border-radius: 15rpx;
		background-color: #fff;
		box-sizing: border-box;
		padding: 10rpx 85rpx 0 85rpx;
		width: 92%;
		margin: 80rpx 4% 0 4%;
	}

	.icon_kuai {
		width: 34%;
		text-align: center;
		margin-bottom: 10rpx;
	}

	.icon_img {
		width: 113rpx;
	}

	.icon_text {
		font-size: 18px;
		font-family: PingFang SC;
		font-weight: bold;
		color: #252B50;
		margin-top: 20rpx;
	}

	@keyframes yu1 {
		0% {
			width: 350rpx;
			height: 350rpx;
		}

		100% {
			width: 450rpx;
			height: 450rpx;
		}
	}

	@keyframes yu2 {
		0% {
			width: 250rpx;
			height: 250rpx;
		}

		100% {
			width: 350rpx;
			height: 350rpx;
		}
	}

	@keyframes yu3 {
		0% {
			width: 176rpx;
			height: 176rpx;
		}

		100% {
			width: 250rpx;
			height: 250rpx;
		}
	}

	.msg_box {
		width: 100%;
		text-align: center;
		margin: 100rpx 0;
		color: #252B50;
	}

	.ks_icon {
		width: 30rpx;
		margin-right: 20rpx;
	}

	.input_box {
		border-bottom: 1rpx solid #F5F5F5;
		text-align: center;
		box-sizing: border-box;
		padding: 20rpx 0;
		width: 94%;
		margin: 0 auto;
	}

	.ks_button {
		background-color: #3C7CFF;
		text-align: center;
		width: 80%;
		margin: 180rpx auto 40rpx auto;
		color: #fff;
		border-radius: 35rpx;
		height: 80rpx;
		line-height: 80rpx;
	}

	.qx_button {
		background-color: #fff;
		text-align: center;
		width: 80%;
		margin: 10rpx auto 40rpx auto;
		color: #9296AF;
		border-radius: 35rpx;
		height: 78rpx;
		line-height: 78rpx;
		border: 1rpx solid #3C7CFF;
	}

	.mobile {
		width: 52rpx;
		margin-bottom: 7rpx;
	}

	.ks_box {
		box-sizing: border-box;
		padding: 0 20rpx;
		width: 100%;
		position: relative;
	}



	.m_box {
		width: 130rpx;
		height: 130rpx;
		border-radius: 50%;
		
		text-align: center;
		color: #fff;
		margin: 0 20rpx 0 auto;
		font-size: 20rpx;
		font-weight: 500;
	}

    .m_back{
		background: #FF8527;
	}


	.tc {
		height: 365rpx;
	}
</style>